<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>

<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>

    <script>
        //定义我们的webroot的主机名
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;//websocket的句柄
        //断开连接
        window.onbeforeunload = function () {
            ws_hdl.close();
        }
        var match_flag = "stop";
        var matchhdl = document.getElementById("match-button");
        //发送匹配请求的按钮
        matchhdl.onclick = function () {
            if (match_flag == "stop") {
                var struct_req = {
                    optype: "match_start"
                };
                ws_hdl.send(JSON.stringify(struct_req));
            } else {
                var struct_req = {
                    optype: "match_stop"
                };
                ws_hdl.send(JSON.stringify(struct_req));
            }
        }

        function ws_onopen() {
            console.log("大厅连接成功");
        }
        function ws_onclose() {
            console.log("大厅连接关闭");
        }
        function ws_onerror() {
            console.log("大厅连接错误");
        }
        //收到服务器应答
        function ws_onmessage(evt) {
            var resp_json = JSON.parse(evt.data);
            if (resp_json.result == false) {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
            if (resp_json["optype"] == "match_success") {
                alert("对战匹配成功，进入游戏房间！");
                location.replace("/game_room.html");
                return;
            } else if (resp_json["optype"] == "hall_ready") {
                alert("游戏大厅连接建立成功！");
                return;
            } else if (resp_json["optype"] == "match_start" && resp_json["result"] == true) {
                console.log("玩家已经加入匹配队列");
                match_flag = "start";
                matchhdl.innerHTML = "匹配中....点击按钮停止匹配!";
                return;
            } else if (resp_json["optype"] == "match_stop" && resp_json["result"] == true) {
                console.log("玩家已经移除匹配队列");
                match_flag = "stop";
                matchhdl.innerHTML = "开始匹配";
                return;
            } else {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
        }

        function showuserinfo() {
            $.ajax({
                url: "/userinfo",
                type: "get",
                success: function (res) {
                    var info_html = "<p>" + "用户：" + res.username + " 积分：" + res.score +
                        "</br>" + "比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;//内嵌一个html页面
                    //成功获取用户信息后我们进行我们的申请协议进行切换
                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;

                },
                error: function (xhr) {
                    alert(JSON.stringify(xhr));
                    window.location.assign("/login.html");
                }
            })
        }
        showuserinfo();
    </script>
</body>

</html>